<template>
  <view class="bg-img">
    <image src="/static/bg.png" class="background-image" mode="aspectFill" />

    <view class="textarea">
      <text class="text">
        位于四川省成都市郫都区德源镇东林艺术村，是全国唯一经袁隆平院士授权以其名字命名的园区。
        全国首批科学家精神教育基地，园区以袁隆平院士为精神支柱，以稻蒜文化为基础，将科研场景
        变成教学场景，建立劳动教育、农业科普教育基地及成人实训基地。
      </text>
    </view>

    <!-- 卡片区域 -->
    <view class="card-container">
      <navigator url="/pages/service1/service1" class="uni-card">
        <image src="../../static/geren.png" class="card-icon"></image>
        <view class="card-texts">
          <text class="card-title">个人预约</text><br>
          <text class="card-subtitle">Personal reservation</text>
        </view>
      </navigator>

      <navigator url="/pages/service/service" class="uni-card">
        <image src="../../static/tuanti.png" class="card-icon"></image>
        <view class="card-texts">
          <text class="card-title">团体预约</text><br>
          <text class="card-subtitle">Group reservation</text>
        </view>
	
      </navigator>

      <navigator url="/pages/pingzheng/team-pingzheng" class="uni-card">
        <image src="../../static/saoma.png" class="card-icon"></image>
        <view class="card-texts">
          <text class="card-title">扫码入园</text><br>
          <text class="card-subtitle">Scan the QR code to enter the park</text>
        </view>
      </navigator>
    </view>
  </view>
</template>


<script setup>

</script>

<style scoped>
.bg-img {
  width: 100%;
  height: 100vh;
  position: relative;
}

.background-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.text {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 15px;
  color: #05261B;
  line-height: 21px;
  position: absolute;
  margin: 127px 48px 0 48px;
}

.textarea {
  width: 259px;
  height: auto;
  /* 高度自适应内容 */
  font-weight: 400;
  font-size: 15px;
  /* 与 .text 中的字体大小一致 */
  letter-spacing: 0;
  line-height: 21px;
  /* 与 .text 中的行高一致 */
}
.card-container {
  position: absolute;
  bottom: 80px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.uni-card {
  width: 90%;
  max-width: 600rpx;
  height: 80rpx;
  border-radius: 12px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.card-icon {
  width: 32px;
  height: 32px;
}

.card-texts {
  margin-left: 20px;
}

.card-title {
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 16px;
  color: #05261B;
}

.card-subtitle {
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #5F5F5F;
}
</style>
